<template>
  <div class="common-layout">
    <el-container>
      <el-header>
        <CommonHeader :condition="conditions"/>
      </el-header>
      <el-main>
        <div>
          <ElForm :inline="true">
            <ElFormItem>
              <ElInput v-model="fileinfo.fileName" placeholder="文件名"></ElInput>
            </ElFormItem>
            <ElFormItem>
              <ElInput v-model="fileinfo.contentType" placeholder="文件类型"></ElInput>
            </ElFormItem>
            <ElFormItem>
              <ElInput v-model="fileinfo.info" placeholder="文件描述"></ElInput>
            </ElFormItem>
            <ElFormItem>
              <ElButton @click="queryfile()" type="primary">查询</ElButton>
            </ElFormItem>
            <ElFormItem>
              <ElButton @click="uploadVisible = true" type="primary">文件上传</ElButton>
            </ElFormItem>
          </ElForm>
        </div>

        <div class="tm">
          <el-table :data="tableData" style="width: 100%">
            <el-table-column fixed label="文件上传时间" width="200">
              <template #default="scope">
                {{ Tools.formatDate(scope.row.created) }}
              </template>
            </el-table-column>
            <el-table-column prop="fileName" label="文件名" width="600" />
            <el-table-column prop="info" label="文件描述" width="120" />
            <el-table-column prop="contentType" label="文件类型" width="120" />
            <el-table-column prop="fileSize" label="文件大小" width="120" />
            <el-table-column fixed="right" label="操作按钮" width="400">
              <template #default="scope">
                <el-button link type="primary" size="small" @click="Previews(scope.row)">预览</el-button>
                <el-button link type="primary" size="small" @click="queryurl(scope.row.fid)">下载</el-button>
                <el-button link type="primary" size="small" @click="queryurls(scope.row.fid)">复制文件链接</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div>
          <PageComp :page="page" @page-change="queryfile()"></PageComp>
        </div>
      </el-main>
    </el-container>
  </div>

  <!-- 预览弹窗部分 -->
  <el-dialog v-model="dialogVisible" title="预览" width="30%" :before-close="handleClose">
    <div style="margin: 20px" />

    <el-form :label-position="labelPosition" label-width="100px" style="max-width: 460px">
      <el-form-item v-if="previewData?.contentType.startsWith('image/')">
        <img :src="L12030.getFileUrl(previewData?.fid)" style="width: 100px; height: 100px" />
      </el-form-item>
      <el-form-item v-if="previewData?.contentType.startsWith('video/')">
        <div class="div1">
          <video :src="L12030.getFileUrl(previewData?.fid)" controls></video>
        </div>
        
      </el-form-item>
      <!-- <el-form-item>
        <video :src="urlImg" style="width: 100px; height: 100px" />
      </el-form-item>
      <el-form-item>
        <audio :src="urlImg" style="width: 100px; height: 100px" />
      </el-form-item> -->
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">关闭</el-button>
      </span>
    </template>
  </el-dialog>

  <!-- 文件上传 -->
  <el-dialog v-model="uploadVisible" title="上传文件" width="30%" :before-close="handleClose">
    <el-form-item label="文件描述">
      <el-input v-model="fileinfos.info" placeholder="文件描述" clearable />
    </el-form-item>
    <div>
      <input type="file" @change="handleFileUpload" />
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="uploadVisible = false">关闭</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ElTable, ElTableColumn, ElButton,ElLoading, ElContainer, ElHeader, ElMain, ElMessageBox, ElDialog, ElForm, ElFormItem, ElInput, ElUpload } from 'element-plus'
import CommonHeader from '../../components/CommonHeader.vue'
import { L12030 } from '../../api/L12030'
import { ref } from 'vue'
import { PageInfo } from '../../ts/BaseResult'
import { BaseResult } from '../../ts/BaseResult'
import { Tools } from '../../ts/Tools'
import { TbFile } from '../../ts/File'
import PageComp from '../../components/PageComp.vue'
const conditions=ref("前端")
const uploadVisible = ref(false)
const fileinfos = ref({
  info: '',
})
const file = ref(null)

const handleFileUpload = (event: any) => {
  file.value = event.target.files[0] // 获取选中的文件
  L12030.upload(fileinfos.value, file.value, (data: BaseResult) => {
    if (data.success) {
      ElMessageBox.alert('文件上传成功')
      location.reload();
    } else {
      ElMessageBox.alert('文件上传失败')
    }
  })
}

const fileinfo = ref({
  fileName: '',
  info: '',
  contentType: '',
})
const dialogVisible = ref(false)
const labelPosition = ref<FormProps['labelPosition']>('right')

const previewData = ref({})
const page = ref(new PageInfo())
const tableData = ref([])
const urls = ref('')
function queryfile() {
  L12030.get('/user/file', Tools.concatJson(page.value, fileinfo.value), (data: BaseResult) => {
    const loading = ElLoading.service({
    lock: true,
    text: 'Loading',
    background: 'rgba(0, 0, 0, 0.7)',
  })
    if (data.success) {
      loading.close()
      tableData.value = data.data
      page.value = data.page
    } else {
      ElMessageBox.alert(data.message)
    }
  })
}

function Previews(info: any) {
  previewData.value = info
  dialogVisible.value = true
}

function queryurl(info: TbFile) {
  urls.value = L12030.getFileUrl(info)
  window.open(urls.value)
}

function queryurls(info: TbFile) {
  urls.value = L12030.getFileUrl(info)
  Tools.copyText(urls.value)
  ElMessageBox.alert('地址复制成功')
}

queryfile()
</script>

<style lang="scss" scoped>
.div1 {  
  display: flex;  
  justify-content: center;  
  align-items: center;  
  height: 100vh; /* 根据需要调整高度 */  
  overflow: hidden; /* 防止超出范围 */  
}  
  
.tm{
  opacity: 0.7; 
}
video {  
  max-width: 100%; /* 限制视频宽度不超出容器 */  
  max-height: 100%; /* 限制视频高度不超出容器 */  
}
</style>
